<template>
    <div id="z">
        <div id="r1">
            <div id="r1c1">
                <img id="r1c1-avatar" :src="seller.avatar">
            </div>
            <div id="r1c2">
                <div id="r1c2r1">
                    <span id="r1c2r1c1-brand">&nbsp;</span>
                    <span id="r1c2r1c2-name">{{seller.name}}</span>
                </div>
                <div id="r1c2r2-descrption">{{seller.description}}/{{seller.deliveryTime}}分钟送达</div>
                <div id="r1c2r3" v-if="seller.supports" class="flex">
                    <icon id="r1c2r3c1-supportType" :type="seller.supports[0].type"></icon>
                    {{seller.supports[0].description}}
                    <span id="r1c2r3c2-supportCount" @click="$store.dispatch('togHeadDetail',true)">{{seller.supports.length}}个 <span class="iconfont icon-right"></span></span>
                </div>
            </div>
        </div>
        <div id="r2-bulletin">
            <span id="r2c1-bulletinTitle"> </span>
            <span id="r2c2-bulletinText">{{seller.bulletin}}</span>
            <span id="r2c2-bulletinIcon" class="iconfont icon-right"></span>
        </div>
        <div id="r3-blur">
            <img id="r3-blerImg" :src="seller.avatar">
        </div>
        <fade>
            <head-detail :seller="seller" v-show="$store.state.togHeadDetail"></head-detail>
        </fade>
    </div>
</template>

<script>
    import Fade from '../fade/fade'
    import Icon from '../icon/icon'
    import HeadDetail from './headDetail'
    export default {
        name: "headxxxxxxx",    //不能取名为 head
        data(){
            return{
                seller:{},
                mapclass:['decrease', 'discount', 'special', 'invoice', 'guarantee'],
                showDetail:false
            }
        },
        components:{
            Fade,
            Icon,
            HeadDetail,
        },
        methods:{
            sellerData(res){
                this.seller=res.data.data
            }
        },
        mounted(){
            this.axios.get('/api/seller.json').then(this.sellerData)
        }
    }
</script>

<style scoped lang="stylus">
    @import '~@styles/variables.styl'

    #z
        position:relative
    #r1
        background-color:rgba(7,17,27,0.5)
        color:white
        font-size: $font-size
        padding: $padding*1.5 $padding*1 $padding*1 $padding*1.5
        display: flex
        align-items: flex-start
        #r1c1
            background-color:green
            width: $fontSize*5.3
            height: $fontSize*5.3
            text-align: center
            #r1c1-avatar
                width:100%
                border-radius: 2px
        #r1c2
            flex:1
            font-size: $fontSize
            line-height: $fontSize*1.4
            #r1c2r1
                font-size: $fontSize*1.1
                font-weight: bold
                display:flex
                align-items:center
                #r1c2r1c1-brand
                    display:inline-block
                    margin: 0 0 0 $padding
                    bgImg('brand')
                    width:$fontSize*2.5
                #r1c2r1c2-name
                    display:inline-block
                    margin: 0 0 0 $padding*0.5
            #r1c2r2-descrption
                display:block
                margin: $padding*1.1 0 0 $padding
            #r1c2r3
                position:relative
                padding-top:0
                display:flex
                align-items:center
                #r1c2r3c1-supportType
                    width:$fontSize
                    height:$fontSize
                    margin: 0 $padding*0.5 0 $padding
                #r1c2r3c2-supportCount
                    position:absolute
                    right:0
                    height: $fontSize*2
                    line-height: $fontSize*2
                    padding:0 5px
                    background-color:rgba(7,17,27,0.2)
                    border-radius:10px
                    text-align:center

    #r2-bulletin
        background-color:rgba(7,17,27,0.6)
        color:white
        display:flex
        flex-flow:nowrap row
        align-items:center
        padding: $padding*0.6 $padding $padding*0.4 $padding
        #r2c1-bulletinTitle
            width:$fontSize*(44/22)
            min-width:$fontSize*(44/22)
            height:$fontSize*(24/22)
            display:inline-block
            bgImg('bulletin')
        #r2c2-bulletinText
            padding:0 0 0 $fontSize*0.6
            ellipsis()
    #r3-blur
        filter:blur(20px)
        position:absolute
        width: 100%
        height: 100%
        bottom:0
        z-index:-1
        #r3-blerImg
            width:100%
            height:100%



</style>
